<template>
  <el-container style="height: 100%">
    <el-main>
      <el-card style="height: 100%">
        <div slot="header" class="clearfix">
          <strong style="font-size: 20px;margin-left: 1%">收藏分享区</strong>
        </div>
        <el-timeline style="margin-top: 16px">
          <el-timeline-item v-for="(info,index) in shares" :key="info.id" :timestamp="info.updatedTime" placement="bottom">
            <el-card class="item" @click.native="gotoShareDetail(info.collectionId)">
              <div class="d-flex align-center">
                <el-avatar size="small" :src="baseUrl + info.avatar"> </el-avatar> <div style="margin-left: 4px;font-size: 16px">{{info.title}}</div>
              </div>
              <div style="font-size: 14px;margin-top: 16px;margin-left: 10px;margin-bottom: 8px">{{render(info.content)}}</div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import MarkdownIt from "markdown-it";
import {getCollection} from "../../network/Details/share";

export default {
  name: "CollectionShare",
  data(){
    return {
      shares: [],
      likeColor: 'light-blue',
      normalColor: 'gray',
      baseUrl: this.$store.state.ossBaseUrl
    }
  },
  methods: {
    initial(){
      const _this = this;
      getCollection(2).then(res => {
        _this.shares = res.data
        console.log(this.shares)
      })
    },
    render(content){
      let MarkdownIt = require("markdown-it")
      let md = new MarkdownIt()
      let text =  md.render(content).replace(/<[^>]+>/g,"")
      return text.length > 10 ? text.substring(0,10) + "..." : text
    },
    gotoShareDetail(id){
      console.log(id)
      this.$router.push({
        name:"ShareDetail",
        query:{
          id:id
        }
      })
    }
  },
  created(){
    this.initial()
  }
}
</script>

<style scoped>
.item:hover {
  transform: translateY(-8px);
  transition: transform 0.2s;
  background: Transparent;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.el-container{
  width: 1200px;
  margin: auto;
}
.css-au84nr-Rank {
  font-size: 14px;
  line-height: 20px;
  min-width: 10px;
  font-family: TypoRound;
  font-style: italic;
  font-weight: 700;
  transform: translateY(1px);
  color: rgba(255,161,22, 1);
}
.css-fyk6rv-layer1-CardContainer:hover {
  background: rgba(	126, 126, 126, 0.04);
  border-radius: 8px;
  box-shadow: 0px 1px 2px rgba(0,0,0, 0.1),0px 2px 8px rgba(0,0,0, 0.08);
  user-select: none;
  padding: 16px 16px 4px;
}
.css-fyk6rv-layer1-CardContainer {
  padding: 16px 16px 4px;
}
.cd .cd:active, .cd:hover, .cd:focus {
  color: rgba(65,145,255, 1);
  text-decoration: none;
}
.cd {
  text-decoration: none;
  background-color: transparent;
  outline: none;
  cursor: pointer;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects;
}
</style>
